<script setup lang="ts">
import type GLanguageToggle from './GLanguageToggle.vue';

const route = useRoute();

const HeaderNav = [
  { name: 'Blog', href: '/GBlog' },
  { name: 'Music', href: '/GMusic' },
  { name: 'About', href: '/GAbout' },
  { name: 'Projects', href: '/GProjects' },
];

const online = useOnline();
const icon = {
  1:'i-carbon-user-admin',
  2:'i-carbon-user-online',
  3:'i-carbon-user-certification',
  4:'i-carbon-user-follow',
  5:'i-carbon-user',
  6:'i-carbon-user-role',
  7:'i-carbon-user-favorite'
}
</script>

<template>
  <div w-full flex justify-around class="header">
    <button m-2 text-btn class="!outline-none" :class="{'text-btn-active': route.path === '/'}">
      <NuxtLink to="/">{{ 'Home'}}</NuxtLink>
    </button>
    <div m-2  flex="~ gap3">
      <button text-btn v-for="item in HeaderNav" :key="item.name" class="!outline-none" :class="{'text-btn-active': item.href === route.path}">
        <NuxtLink :to="item.href">{{ item.name }}</NuxtLink>
      </button>
      <button icon-btn class="!outline-none">
        <div class="i-carbon-logo-github dark:i-carbon-github" />
      </button>
      <button icon-btn class="!outline-none">
        <div class="i-carbon-logo-wechat dark:i-carbon-wechat" />
      </button>
      <GDarkToggle />
      <GLanguageToggle/>
      <!-- <div :class="online?'i-carbon-user-online':'i-carbon-user-access'"></div> -->
    </div>
  </div>
</template>
